<template>
    <ul class="step-list">
      <li
        v-for="step in steps"
        :key="step.id"
        :class="['step-item', { completed: step.completed, active: step.id === currentStep + 1 }]"
      >
        {{ step.name }}
      </li>
    </ul>
  </template>
  
  <script setup>
  import { computed } from "vue";
  
  defineProps({
    steps: Array,
    currentStep: Number,
  });
  </script>
  
  <style scoped>
  .step-list {
    padding: 20px;
    list-style: none;
  }
  .step-item {
    padding: 10px 20px;
    margin: 10px 0;
    border-radius: 4px;
    background-color: #e0e0e0;
    transition: all 0.3s ease-in-out;
  }
  .step-item.active {
    background-color: #42b983;
    color: white;
  }
  .step-item.completed {
    background-color: #a0d7b0;
    text-decoration: line-through;
  }
  </style>
  